use youtube videos inside adobe captivate

for Adobe Captivate 3 users one of the wishes would be how can they insert youtube videos inside their Captivate project file. Here are the ways you can do it.

• this is based on the documentation YouTube ActionScript 2.0 Player API Reference. Visit this page for some more guidelines about using it for loading multiple videos and unloading etc.
• Open a flash actionscript 2.0 file. Copy the code from the page mentioned  above under the example section and paste to the flash file you have just created. Make following changes –
  1. var ytplayer:MovieClip = _root.createEmptyMovieClip(“ytplayer”, 1);
     change this line to var ytplayer:MovieClip =  createEmptyMovieClip(“ytplayer”, 1); as captivate gives warning about using _root in the swf being inserted.
  2. go to www.youtube.com and locate the video you want to insert into Captivate project file.
  3. locate the url of that video – it will be in format of http://in.youtube.com/watch?v=SaBb8Wi25Pg
  4. copy the text marked in red – it uniquely identifies  the video on youtube
  5. switch to your actionscript code
  6. Replace the text copied in earlier step 4 with VIDEO_ID in the statement ytPlayerLoader.loadClip(“http://www.youtube.com/v/VIDEO_ID“, ytplayer);
  7. Save the flash file. Publish it to swf. For best results change the document size of flash to 480 x 385 pixels
  8. Open Captivate. Choose Insert – > Animation . Locate the swf file you published in previous step 7 and insert it.
  9. Now insert a button on the same slide so that Captivate movie will pause at that slide till the time user clicks. So that they can view the video before moving to next slide.
  10. Publish the Captivate project and you will see and can play the video

Pros –

• totally seamless
• you need not use those tools to download video files from youtube to your machine and probably face copyright issue
• no copyright issue as video is being played from youtube site

Cons –

• You have to manually specify the video ID and regenerate swf before using it in captivate.
• this is just a proof of concept. It has many bugs like audio not stopping when you move to next slide, video in some stage when you rewind to the slide containing it and possibly many more. But it is all possible by changing the actionscript code by unloading the video properly.
• you have to add button for slide to pause

ps : watch out for next posts –

• use flickr apis to create slideshows which fetches data from flickr. Use Flash to create the animation which can be used inside captivate.
• some improvemets on youtube sample
• and wait you have a better and elegant solution waiting when Adobe Captivate 4 is released. Update 1 – read step by step guide to create youtube widget for Adobe Captivate 4

Below is the actionscript code for reference –

// create a MovieClip to load the player into
var ytplayer:MovieClip = createEmptyMovieClip(“ytplayer”, 1);

// create a listener object for the MovieClipLoader to use
var ytPlayerLoaderListener:Object = {
  onLoadInit: function() {
    // When the player clip first loads, we start an interval to
    // check for when the player is ready
    this.loadInterval = setInterval(this.checkPlayerLoaded, 250);
  }
};

var loadInterval:Number;
function checkPlayerLoaded():Void {
    // once the player is ready, we can subscribe to events, or in the case of
    // the chromeless player, we could load videos
    if (ytplayer.isPlayerLoaded()) {
        ytplayer.addEventListener(“onStateChange”, onPlayerStateChange);
        ytplayer.addEventListener(“onError”, onPlayerError);
        clearInterval(loadInterval);
    }
}

function onPlayerStateChange(newState:Number) {
    trace(“New player state: “+ newState);
}

function onPlayerError(errorCode:Number) {
    trace(“An error occurred: “+ errorCode);
}

// create a MovieClipLoader to handle the loading of the player
var ytPlayerLoader:MovieClipLoader = new MovieClipLoader();
ytPlayerLoader.addListener(ytPlayerLoaderListener);

// load the player
ytPlayerLoader.loadClip(“http://www.youtube.com/v/iMKGKcxTs6o“, ytplayer);